<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>蓝牌添加页面</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css" />
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
  <script type="text/javascript"
    src="http://api.tianditu.gov.cn/api?v=3.0&tk=e851d2d44c01350840e479724abfcd7e"></script>
  <style>
    .container {
      margin: auto;
      width: 100%;
    }

    .control-group {
      margin-bottom: 15px;
    }

    label {
      display: inline-block;
      /* width: 120px; */
    }

    input {
      padding: 5px;
    }

    #result_container {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ddd;
      background: #fff;
    }

    .reverse-search {
      margin-top: 20px;
      padding: 15px;
      border: 1px dashed #ccc;
      background: #f5f7fa;
    }

    .map-tip {
      margin-top: 5px;
      color: #666;
      font-size: 12px;
    }

    .click-tip {
      margin-top: 5px;
      color: #f60;
      font-size: 12px;
      font-weight: bold;
    }

    .map-loading {
      position: relative;
    }

    .map-loading::after {
      content: "地图加载中...";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.8);
      padding: 10px 20px;
      border-radius: 5px;
      z-index: 1000;
    }

    /* 为地图容器添加相对定位上下文 */
    .map-container {
      position: relative;
      width: 100%;
    }

    .el-overlay {
      z-index: 99999 !important;
    }

    #table2 .el-descriptions__label {
      width: 40px;
    }

    .el-input.is-disabled .el-input__inner {
      -webkit-text-fill-color: #606266;
    }
  </style>
</head>

<body onLoad="onLoad()">
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">
          {{action=='Add'?'添加蓝牌信息':action=='Modify'?'修改蓝牌信息':''}}
        </div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'blue_plate_information', 'form': 'dataForm' ,'primary_key':'Blue_Plate_SerialNumber' })">
      <div class="yl-main">
        <div class="table_titel">
          <div class="titel">蓝牌信息</div>
        </div>
        <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌编号</div>
              </template>
              <el-form-item prop="Blue_Plate_SerialNumber"
                :rules="[{ required: true, message: '请输入蓝牌编号', trigger: 'blur' }]">
                <el-input v-model.trim="dataForm.Blue_Plate_SerialNumber" class="borderless-input"
                  placeholder="请输入蓝牌编号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌名称</div>
              </template>
              <el-form-item prop="Blue_Plate_Name" :rules="[{ required: true, message: '请输入蓝牌名称', trigger: 'blur' }]">
                <el-input @input="InputBlue_Plate_Name" v-model.trim="dataForm.Blue_Plate_Name" class="borderless-input"
                  placeholder="请输入蓝牌名称" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌图片</div>
              </template>
              <el-form-item prop="Blue_Plate_Name" :rules="[{ required: true, message: '请上传蓝牌图片', trigger: 'change' }]">
                <yl-upload v-model="dataForm.Picture_URL"></yl-upload>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌简介</div>
              </template>
              <el-form-item prop="Introduce">
                <el-input type="textarea" :autosize="{ minRows: 2}" v-model.trim="dataForm.Introduce"
                  class="borderless-input" placeholder="请输入蓝牌简介" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌类型</div>
              </template>
              <el-form-item prop="Plate_Type_SerialNumber"
                :rules="[{ required: true, message: '请选择蓝牌类型', trigger: 'change' }]">
                <el-select clearable v-model.trim="dataForm.Plate_Type_SerialNumber" placeholder="请选择蓝牌类型" filterable
                  style="width: 100%">
                  <el-option v-for="(item,index) in blue_plate_type" :key="index" :label="item.Plate_Type_SerialNumber"
                    :value="item.Plate_Type_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">邮政编码</div>
              </template>
              <el-form-item prop="Postal_Code" :rules="[{ required: true, message: '请输入邮政编码', trigger: 'blur' }]">
                <el-input v-model.trim="dataForm.Postal_Code" class="borderless-input" placeholder="请输入邮政编码" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">省/市/区(县)</div>
              </template>
              <el-cascader @change="changeCity" v-model="cityValue" filterable class="borderless-input"
                :props="{value:'value',label:'label',children:'children'}" placeholder="请选择省/市/区(县)" :options="city"
                style="width: 100%"></el-cascader>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">乡镇(街道)</div>
              </template>
              <el-form-item prop="Village_SerialNumber">
                <el-cascader :disabled="city1.length == 0" @change="changeCity1" class="borderless-input"
                  v-model="cityValue1" filterable ref="cascader"
                  :props="{value:'ProvinceNumber',label:'Province',children:'children',checkStrictly: false}"
                  placeholder="请选择乡镇(街道)" :options="city1" style="width: 100%"></el-cascader>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">详细地址</div>
              </template>
              <el-form-item prop="Address" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
                <el-input id="text_" :disabled="cityValue1.length == 0" @input="changeAddress"
                  v-model.trim="dataForm.Address" class="borderless-input" placeholder="请输入详细地址" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">地图</div>
              </template>
              <div class="container map-container">
                <!-- 天地图容器，移除绝对定位并添加到地图容器中 -->
                <div id="mapDiv" style="width: 100%; height: 400px; border: 1px solid #ccc"></div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌中心坐标</div>
              </template>
              <el-form-item prop="Coord" :rules="[{ required: true, validator:IS_Coords, trigger: 'blur' }]">
                <el-input id="lcenter" v-loading="loading" type="textarea" disabled :autosize="{ minRows: 2}"
                  v-model.trim="dataForm.Coord" class="borderless-input" placeholder="请输入蓝牌坐标" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌导航坐标</div>
              </template>
              <el-form-item prop="dhCoord" :rules="[{ required: true, validator:IS_Coords, trigger: 'blur' }]">
                <el-input v-model.trim="dataForm.dhCoord" type="textarea" class="borderless-input" disabled />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">蓝牌坐标集</div>
              </template>
              <el-form-item prop="Coords" :rules="[{ required: true, validator:IS_Coords, trigger: 'blur' }]">
                <el-input type="textarea" :autosize="{ minRows: 2}" v-model.trim="dataForm.Coords"
                  class="borderless-input" @input="InputCoords" placeholder="请输入蓝牌坐标集" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">负责人</div>
              </template>
              <el-form-item prop="Responsible_Person"
                :rules="[{ required: true, message: '请选择负责人', trigger: 'change' }]">
                <yl-select @change="PerName" v-model="dataForm.Responsible_Person" clearable filterable
                  placeholder="请选择负责人" :options="personal" :props="{value:'ID_Card_Number',label:'Personal_Name'}">
                  <el-table-column prop="ID_Card_Number" width="180" show-overflow-tooltip
                    label="身份证号"></el-table-column>
                  <el-table-column prop="Personal_Name" show-overflow-tooltip label="姓名"></el-table-column>
                  <el-table-column prop="Birthday" show-overflow-tooltip label="出生日期"></el-table-column>
                  <el-table-column prop="Gender" label="性别"></el-table-column>
                  <el-table-column prop="Nation" label="民族"></el-table-column>
                  <el-table-column prop="Registered_Residence" show-overflow-tooltip label="籍贯"></el-table-column>
                  <el-table-column prop="Contact_Phone" label="联系方式"></el-table-column>
                </yl-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">联系电话</div>
              </template>
              <el-form-item prop="Contact_Phone" :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
                <el-input v-model.trim="dataForm.Contact_Phone" class="borderless-input" placeholder="请输入联系电话" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋类型</div>
              </template>
              <el-form-item prop="Contact_Phone">
                <el-select multiple clearable v-model.trim="value1" placeholder="请选择房屋类型" filterable
                  style="width: 100%">
                  <el-option
                    v-for="(item,index) in blue_plate_house_tags.filter(i=>i.Parent_SerialNumber=='BPHT00000000003')"
                    :key="index" :label="item.Blue_Plate_House_Tag"
                    :value="item.Blue_Plate_House_Tag_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋规划用途</div>
              </template>
              <el-form-item prop="Contact_Phone">
                <el-select multiple clearable v-model.trim="value2" placeholder="请选择房屋规划用途" filterable
                  style="width: 100%">
                  <el-option
                    v-for="(item,index) in blue_plate_house_tags.filter(i=>i.Parent_SerialNumber=='BPHT00000000001')"
                    :key="index" :label="item.Blue_Plate_House_Tag"
                    :value="item.Blue_Plate_House_Tag_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">房屋状态</div>
              </template>
              <el-form-item prop="Contact_Phone">
                <el-select multiple clearable v-model.trim="value3" placeholder="请选择房屋状态" filterable
                  style="width: 100%">
                  <el-option
                    v-for="(item,index) in blue_plate_house_tags.filter(i=>i.Parent_SerialNumber=='BPHT00000000002')"
                    :key="index" :label="item.Blue_Plate_House_Tag"
                    :value="item.Blue_Plate_House_Tag_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">自建房</div>
              </template>
              <el-form-item prop="Self_Built_Houses">
                <el-switch @change="changeSwitch" style="display: flex; align-items: center;"
                  v-model="dataForm.Self_Built_Houses" active-value="1" inactive-value="0" active-text="是"
                  inactive-text="否"></el-switch>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div id="ChildTable">
          <div v-if="dataForm.Self_Built_Houses=='1'" class="table_titel">
            <div class="titel">自建房信息</div>
          </div>
          <el-form v-if="dataForm.Self_Built_Houses=='1'" :model="childDataForm3" ref="form3" :inline-message="true"
            style="width: 100%">
            <el-descriptions
              :data-options="JSON.stringify({ 'TableName': 'blue_plate_self_built_house', 'form': 'childDataForm3', 'ParentTableName': 'blue_plate_information'})"
              v-for="(item,index) in childDataForm3" :key="index" style="width: 100%;" :column="2" size="large" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">房屋名称</div>
                </template>
                <el-form-item prop="Self_Built_House_Name">
                  <el-input v-model.trim="item.Self_Built_House_Name" class="borderless-input" placeholder="请输入房屋名称" />
                </el-form-item>
              </el-descriptions-item>
              <!-- <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">户主</div>
                    </template>
                    <el-form-item prop="ID_Number">
                        <el-select clearable v-model.trim="item.ID_Number" placeholder="请选择户主"
                            filterable style="width: 100%">
                            <el-option v-for="(item,index) in personal_information" :key="index"
                                :label="item.Personal_Name" :value="item.ID_Card_Number"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">户号</div>
                    </template>
                    <el-form-item prop="Self_Built_Hous_Number">
                        <el-input v-model.trim="item.Self_Built_Hous_Number" class="borderless-input"
                            placeholder="请输入户号" />
                    </el-form-item>
                </el-descriptions-item> -->
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">所属自然村</div>
                </template>
                <el-form-item prop="VillageNumber">
                  <el-select clearable v-model.trim="item.VillageNumber" placeholder="请选择所属自然村" filterable
                    style="width: 100%">
                    <el-option v-for="(item,index) in base_system_village" :key="index" :label="item.Village"
                      :value="item.VillageNumber"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">占地面积</div>
                </template>
                <el-form-item prop="Area">
                  <el-input v-model.trim="item.Area" class="borderless-input" placeholder="请输入占地面积" />
                </el-form-item>
              </el-descriptions-item>
              <!-- <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">常住人口</div>
                    </template>
                    <el-form-item prop="Resident_Population"
                        :rules="[{ required: true, message: '请选择所属自然村', trigger: 'change' }]">
                        <el-input v-model.trim="item.Resident_Population" class="borderless-input"
                            placeholder="请输入常住人口" />
                    </el-form-item>
                </el-descriptions-item> -->
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">建造日期</div>
                </template>
                <el-form-item prop="Build_Date">
                  <el-date-picker v-model="item.Build_Date" type="date" placeholder="请选择建造日期" class="borderless-input"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" />
                </el-form-item>
              </el-descriptions-item>
              <!-- <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">建房层数</div>
                    </template>
                    <el-form-item prop="Storey_Number"
                        :rules="[{ required: true, message: '请选择所建房层数', trigger: 'change' }]">
                        <el-input v-model.trim="item.Storey_Number" class="borderless-input"
                            placeholder="请输入建房层数" />
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">联系电话</div>
                    </template>
                    <el-form-item prop="Contact_Phone"
                        :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
                        <el-input v-model.trim="item.Contact_Phone" class="borderless-input"
                            placeholder="请输入联系电话" />
                    </el-form-item>
                </el-descriptions-item> -->
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">建设性质</div>
                </template>
                <el-form-item prop="Built_Type_SerialNumber">
                  <el-select clearable v-model.trim="item.Built_Type_SerialNumber" placeholder="请选择建设性质" filterable
                    style="width: 100%">
                    <el-option v-for="(item,index) in blue_plate_self_built_house_type" :key="index"
                      :label="item.Built_Type" :value="item.Built_Type_SerialNumber"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
          <!-- <div class="table_titel">
            <div class="titel">蓝牌房屋标签</div>
            <div class="operation">
              <el-button type="primary" size="small" @click="showDialog=true">选择蓝牌房屋标签</el-button>
            </div>
          </div>
          <el-form :model="{childDataForm1}" ref="form2" :inline-message="true" style="width: 100%">
            <el-descriptions id="table2"
              :data-options="JSON.stringify({ 'TableName': 'blue_plate_house_mapping_tags', 'form': 'childDataForm1', 'ParentTableName': 'blue_plate_information'})"
              :column="5" size="large" border>
              <el-descriptions-item v-for="(item,index) in childDataForm1.filter(item => item.Row_Status != '1')"
                :key="index">
                <template #label>
                  <div class="cell-item">{{index+1}}</div>
                </template>
                <el-form-item :prop="'childDataForm1.'+index+'.Blue_Plate_House_Tag_SerialNumber'"
                  :rules="[{ required: true, message: '请选择房屋标签', trigger: 'change' }]">
                  <yl-cascader disabled v-model="item.Blue_Plate_House_Tag_SerialNumber" placeholder="请选择房屋标签"
                    :options="treeData"
                    :props="{ value:'Blue_Plate_House_Tag_SerialNumber', label:'Blue_Plate_House_Tag' ,checkStrictly: true }"></yl-cascader>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form> -->
          <el-descriptions
            :data-options="JSON.stringify({ 'TableName': 'blue_plate_house_mapping_tags', 'form': 'childDataForm1', 'ParentTableName': 'blue_plate_information'})"></el-descriptions>
          <!-- <div class="table_titel">
            <div class="titel">蓝牌图片</div>
            <div class="operation">
              <el-button :type="drag?'danger':'success'" size="small"
                @click="handledrag()">{{drag?'取消':'排序'}}</el-button>
              <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
              <el-button type="danger" size="small" @click="handleRemove('childDataForm',0)">删除</el-button>
            </div>
          </div>
          <div class="el-descriptions"
            :data-options="JSON.stringify({ 'TableName': 'blue_plate_image', 'form': 'childDataForm', 'ParentTableName': 'blue_plate_information'})">
          </div>
          <el-form id="form1" :model="{childDataForm}" ref="form1" :inline-message="true" style="width: 100%">
            <el-descriptions id="table" v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')"
              :key="index" :column="2" size="large" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">{{index + 1}}.图片</div>
                </template>
                <el-form-item :prop="'childDataForm.'+index+'.Image_URL'"
                  :rules="[{ required: true, message: '请输入新闻标题', trigger: 'blur' }]">
                  <yl-upload v-model="item.Image_URL"></yl-upload>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">图片类型</div>
                </template>
                <el-form-item :prop="'childDataForm.'+index+'.Image_Type_SerialNumber'"
                  :rules="[{ required: true, message: '请选择图片类型', trigger: 'change' }]">
                  <el-select clearable v-model.trim="item.Image_Type_SerialNumber" placeholder="请选择图片类型" filterable
                    style="width: 100%">
                    <el-option v-for="(item,index) in image_type" :key="index" :label="item.Image_Type"
                      :value="item.Image_Type_SerialNumber"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form> -->
        </div>
        <el-dialog v-model="showDialog" width="550" class="custom-dialog" v-cloak>
          <template #header>
            <div class="dialog-header">
              <span>请选择蓝牌房屋标签</span>
            </div>
          </template>
          <div style="border: 1px solid #f5f5f5; height: 500px; display: flex;">
            <div
              style="padding: 10px 12px 0 8px; width: 280px; height: 100%; border-right: 1px solid #f5f5f5; flex-shrink: 0;">
              <el-input @change="query" placeholder="搜索蓝牌房屋标签" v-model="value" prefix-icon="Search"
                clearable></el-input>
              <div v-if="!isQuery" style="height: 420px; margin-top: 20px; overflow-y: auto;">
                <el-tree default-expand-all :expand-on-click-node="false" :data="treeData" @node-click="handleNodeClick"
                  :props="{ label: 'Blue_Plate_House_Tag' }">
                  <template #default="{ node, data }">
                    <div class="custom-tree-node">
                      <el-tooltip class="item" effect="dark" :content="node.label" placement="left">
                        <span
                          :style="{color: childDataForm1.filter(item => item.Row_Status != '1').some(i=>i.Blue_Plate_House_Tag_SerialNumber==data.Blue_Plate_House_Tag_SerialNumber)?'#409EFF':''}">{{
                          node.label }}</span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-tree>
              </div>
              <div v-else style="padding: 20px 0;">
                <div class="el-tree__empty-block" v-if="tableData.length == 0"><span
                    class="el-tree__empty-text">暂无数据</span></div>
                <ul v-else style="overflow-y: auto; height: 420px; width: 100%; margin-left: 20px;">
                  <li @click="handleNodeClick(item)" v-for="(item,index) in tableData" class="select-li" :key="index"
                    style="height: 26px; display: flex; align-items: center;
                    justify-content: space-between; cursor: pointer;overflow: hidden;">
                    <span class="el-tooltip__trigger"
                      :style="{color: childDataForm1.filter(item => item.Row_Status != '1').some(i=>i.Blue_Plate_House_Tag_SerialNumber==item.Blue_Plate_House_Tag_SerialNumber)?'#409EFF':''}"
                      style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:220px">
                      <el-tooltip class="item" effect="dark" :content="item.Blue_Plate_House_Tag" placement="left">
                        {{item.Blue_Plate_House_Tag}}
                      </el-tooltip>
                    </span>
                  </li>
                </ul>
              </div>
            </div>
            <div style="width: 100%;display: flex; flex-direction: column;">
              <div style="height: 42px; width: 100%; border-bottom:1px solid #f5f5f5; padding: 0 10px; font-size: 12px;
                display: flex; justify-content: space-between; align-items: center;flex-shrink: 0;">
                <span>已选（{{childDataForm1.length}}）</span>
                <span style="cursor: pointer;color: #409EFF;" @click="clear">清空</span>
              </div>
              <div style="padding: 20px 10px 20px 20px;">
                <ul style="overflow-y: auto; height: 420px; width: 100%;">
                  <li @click="remove(item,index)"
                    v-for="(item,index) in childDataForm1.filter(item => item.Row_Status != '1')" class="select-li"
                    :key="index" style="height: 26px; display: flex; align-items: center;
                    justify-content: space-between; cursor: pointer;overflow: hidden;">
                    <span class="el-tooltip__trigger"
                      style="color: #409EFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:175px">
                      <el-tooltip class="item" effect="dark"
                        :content="Agensies_Name(item.Blue_Plate_House_Tag_SerialNumber)" placement="left">
                        {{Agensies_Name(item.Blue_Plate_House_Tag_SerialNumber)}}
                      </el-tooltip>
                    </span>
                    <el-icon>
                      <Close />
                    </el-icon>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
              <!-- <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button> -->
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit" :loading="loading2">提交</el-button>
    </footer>
  </div>
</body>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> -->
<script src="../../../utils/Sortable.min.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/utils.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/api.js"></script>
<script src="./js/getscript.js"></script>
<script src="./js/add.js"></script>
<script type="text/javascript">
  var map,
    zoom = 12;
  marker = null;
  function onLoad() {
    // 获取DOM元素和初始值
    const lcenterElement = document.getElementById("lcenter");
    let initialValue = lcenterElement.value;

    // 初始化地图
    map = new TMap("mapDiv");
    let marker; // 声明标注变量

    // 处理初始坐标
    if (initialValue) {
      try {
        const values = JSON.parse(initialValue);
        const lng = values[0];
        const lat = values[1];

        map.centerAndZoom(new TLngLat(lng, lat), zoom);
        marker = new TMarker(new TLngLat(lng, lat));
        map.addOverLay(marker);
      } catch (error) {
        console.error("初始坐标解析失败:", error);
        map.centerAndZoom(new TLngLat(122.545418, 52.978303), zoom); // 默认北京坐标
      }
    } else {
      map.centerAndZoom(new TLngLat(122.545418, 52.978303), zoom); // 默认北京坐标
    }
    // 添加输入事件监听（核心逻辑）
    lcenterElement.addEventListener("input", function () {
      const newValue = this.value;
      console.log("坐标值更新:", newValue);
      // 防止空值导致错误
      if (!newValue) return;
      try {
        const values = JSON.parse(newValue);
        const lng = values[0];
        const lat = values[1];

        // 更新地图和标注
        map.centerAndZoom(new TLngLat(lng, lat), zoom);

        // 优化标注更新：先移除再添加，避免多个标注
        if (marker) map.removeOverLay(marker);
        marker = new TMarker(new TLngLat(lng, lat));
        map.addOverLay(marker);
      } catch (error) {
        console.error("坐标解析失败:", error);
        // 可以添加错误提示或自动填充默认值
      }
    });
  }
  // 百度坐标系(BD-09)转WGS-84
  function bd09ToWGS84(bd_lon, bd_lat) {
    var gcj = bd09ToGcj02(bd_lon, bd_lat);
    return gcj02ToWGS84(gcj.lng, gcj.lat);
  }
  // 百度坐标系(BD-09)转火星坐标系(GCJ-02)
  function bd09ToGcj02(bd_lon, bd_lat) {
    var x = bd_lon - 0.0065,
      y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI);
    var gcj_lon = z * Math.cos(theta);
    var gcj_lat = z * Math.sin(theta);
    return { lng: gcj_lon, lat: gcj_lat };
  }
  // BD-09(百度坐标系)转GCJ-02(腾讯、高德坐标系)
  function bd09ToGCJ02(bdLng, bdLat) {
    const x = bdLng - 0.0065;
    const y = bdLat - 0.006;
    const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI * 3000.0 / 180.0);
    const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI * 3000.0 / 180.0);
    const ggLng = z * Math.cos(theta);
    const ggLat = z * Math.sin(theta);
    return { lng: ggLng, lat: ggLat };
  }
  // 火星坐标系(GCJ-02)与WGS-84互转（简化版）
  function gcj02ToWGS84(gcj_lon, gcj_lat) {
    // 中国区域内GCJ-02到WGS-84的偏移参数（简化模型）
    var dLon = 0.0065;
    var dLat = 0.006;
    var radLat = (gcj_lat / 180) * Math.PI;
    var magic = Math.sin(radLat);
    magic = 1 - 0.0025 * Math.cos(2 * radLat);
    var sqrtMagic = Math.sqrt(magic);

    var wgs_lon =
      gcj_lon -
      (dLon * 180) / ((Math.PI * 6378137 * Math.cos(radLat)) / sqrtMagic);
    var wgs_lat = gcj_lat - (dLat * 180) / ((Math.PI * 6378137) / sqrtMagic);

    return { lng: wgs_lon, lat: wgs_lat };
  }
</script>

</html>